<!--
 * @Author: Mr.Sen
 * @LastEditTime: 2021-02-22 17:31:25
 * @Description: 
 * @Website: https://grimoire.cn
 * @Copyright (c) Mr.Sen All rights reserved.
-->
{%extends "root.html" %}

{% block userInfo %}

<style type="text/css">
	#metaInfo {
		/* background-color: #f38181; */
		display: flex;
		width: 100vw;
		flex-direction: column;
		/* color: #FFFFFF; */
		font-family: "黑体";
		/* padding: 5vh 0; */
		padding-top: 10vh;
		padding-bottom: 6vh;
	}
	#metaInfo>.block {
		/* display: inline-block; */
		margin: 0 auto;
		/* width: 100px; */
		padding: 5px 10px;
		text-align: center;
		/* background-color: #f38181; */
		font-size: 36px;
		/* font-weight: 500; */
	}
	#metaInfo>.description {
		margin: 20px auto;
		text-align: center;
		font-size: 16px;
		color: #8c8889;
	}
	.body>main {
		min-height: calc(100vh - 16vh - 15vh - 40px - 73px - 80px);
		/* min-height: calc(100vh - 16vh - 15vh - 40px - 73px ); */
	}
	@media only screen and (max-width:768px) {
		.body>main {
			/* min-height: calc(100vh - 16vh - 15vh - 40px - 73px - 80px); */
			min-height: calc(69vh - 115px );
		}
	}
</style>
<div id="metaInfo">
	<div class="block">{{pageName | upper}}</div>
	<div class="description iconfont icon-wenjianjia"> 共计{{metaCount}}篇</div>
</div>

{% endblock %}


{% block mainbody %}
<link rel="stylesheet" type="text/css" href="/static/css/mycompent.css" />
<div class="subContent">
	{% for i in range %}

	<a class="doc-list-card" href="#">
		<div class="content loading">
			<article class="loading-content">
				<div class="date"></div>
				<div class="title"></div>
				<div class="brief"></div>
			</article>
			<article class="loading-animation">
				<div class="sk-wave">
					<div class="sk-rect sk-rect-1"></div>
					<div class="sk-rect sk-rect-2"></div>
					<div class="sk-rect sk-rect-3"></div>
					<div class="sk-rect sk-rect-4"></div>
					<div class="sk-rect sk-rect-5"></div>
				</div>
			</article>
		</div>
	</a>

	{% endfor %}
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

<script>
	axios.interceptors.request.use((config) => {
		config.headers['X-Requested-With'] = 'XMLHttpRequest';
		let regex = /.*csrftoken=([^;.]*).*$/;
		config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1];
		return config
	});
	axios.get(
		'/renderMeta/?meta={{metaId}}'
	).then((response) => {
		console.log(response.data)
		var dataList = response.data.data.reverse();
		var title = document.querySelectorAll(".title");
		var content = document.querySelectorAll(".content")
		var brief = document.querySelectorAll(".brief");
		var loadingContent = document.querySelectorAll(".loading-content");
		var loadingAnimation = document.querySelectorAll(".loading-animation");
		var date = document.querySelectorAll(".date");
		var card = document.querySelectorAll(".doc-list-card")

		for (var i = 0; i < dataList.length; i++) {
			title[i].innerText = dataList[i].title;
			card[i].href = "/doc/?p=" + dataList[i].id;

			brief[i].innerText = "预计阅读时间" + Math.ceil(dataList[i].length / 300) + "分钟";
			date[i].innerText = getLocalTime(dataList[i].lastEdit);
			loadingContent[i].setAttribute("class", "");
			loadingAnimation[i].style.display = "none";
			loadingAnimation[i].setAttribute("class", "")
			content[i].setAttribute("class", "content")
		}
	})
	function getTitle(str) {
		if (str == undefined) {
			str = "暂无文章"
		}
		return str
	}
</script>
{% endblock %}